
<template>
    <ul class="list" :class="{LetterClick: touchStatus}">
      <li class="iteam" 
          v-for="cits of lettes" 
          :key="cits"
          :ref="cits"
          @click="handLetterClick"
          @touchstart.prevent="touchLetterStart"
          @touchmove="touchLetterMove"
          @touchend="touchLetterEnd"
      >
        {{ cits }}
      </li>
    </ul>
</template>

<script>
export default {
  name: "CityAlphablet",
  props: {
    cities: Object
  },
  data () {
    return {
      citys: this.cities,
      touchStatus: false,
      timer: 0,
      Y: ""
    }
  },
  watch: {
    cities(ne) {
      this.citys = ne
    }
  },
  computed: {
    lettes() {
      const lettes = []
      for(let i in this.cities) {
        lettes.push(i)
      }
      return lettes
    }
  },
  updated(){
    this.startY = this.$refs["A"][0].offsetTop
    this.elmentHeight = (this.$refs["B"][0].offsetTop - this.$refs["A"][0].offsetTop)
  },
  methods: {
    handLetterClick(e) {
      this.$emit("LetterClick",e.target.innerText)
    },
    touchLetterStart() {
      this.touchStatus = true
    },
    touchLetterMove(e){
      if(this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(()=>{
        if(this.touchStatus){
          const touchY = e.touches[0].clientY - 79
          const index = Math.floor((touchY - this.startY) / this.elmentHeight)
          if(index >=0 && index < this.lettes.length) {
            const city = this.lettes[index]
            this.$emit("LetterClick",city)
          }
        }
      },16)
    },
    touchLetterEnd(){
      this.touchStatus = false
    }
  },

}
</script>

<style lang="stylus" scoped>
  @import "~styles/varibles.styl"
  .list
    position: absolute
    display: flex
    flex-direction: column
    justify-content: center
    top: 1.58rem
    right: 0
    bottom: 0
    // width: 0.2rem
    .iteam
      line-height: .40rem
      text-align: center
      color: $bgColor
  .LetterClick  .iteam
    margin-top: .05rem
    margin-right: .2rem 
    font-size: .32rem
</style>


